<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<image
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826957018619333.png"
				class="image_1" />
			<view class="flex-col group_1">
				<view class="flex-col section_1">
					<view class="flex-row">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
							class="image_2" />
						<text class="text_1">施工巡检介绍</text>
					</view>
					<text class="text_2">
						对施工组织、材料、工艺质量、设计缺漏、进度、节点验收项、成品保护、安全施工等进行全方位高等级巡检确保工程“高品质”，根据巡检次数又分四类巡检。
					</text>
				</view>
				<view class="flex-col section_2">
					<view class="justify-between section_3">
						<text class="text_3">我的房屋信息</text>
						<image @click="go('/pages/index/editHourse?id='+projectId)"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826925530282387.png"
							class="image_4" />
					</view>
					<view class="justify-between group_3 view">
						<text class="text_4">房屋位置</text>
						<text class="text_6">{{ cityInfo }}</text>
					</view>
					<view class="justify-between group_4">
						<text class="text_8">详细地址</text>
						<text class="text_9">{{ address }}</text>
					</view>
					<view class="justify-between group_3 view_1">
						<text class="text_4 text_10">房屋面积</text>
						<text class="text_6 text_11">{{ roomArea }}m²</text>
					</view>
					<view class="justify-between group_5">
						<text class="text_12">房屋类型</text>
						<text class="text_13">{{ roomTypeName }}</text>
					</view>
				</view>

				<view class="flex-col section_4">
					<view class="flex-col">
						<view class="flex-row group_7">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_2" />
							<text class="text_14">选择巡检类型</text>
						</view>

					</view>
					<view class="flex-col group_10">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioItem" :key="index"
							@click="radioChange(item)">
							<view class="justify-between">
								<view class="flex-col">
									<view class="flex-row">
										<text class="text_18">{{ item.detailedName }}</text>
										<!-- 此处有弹窗事件 -->
										<image
											src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826926394646541.png"
											class="image_6 image_8" @click.stop="showMask(index,item.detailedName)" />
										<u-modal @confirm="show = false" :show="show" :title="title"
											:content='contentModal'></u-modal>
									</view>
									<view class="flex-row group_14">
										<text
											class="text_19">{{item.cityLevel==1?item.firstPrice:(item.cityLevel==2?item.secondPrice:item.thirdPrice)}}/m²</text>

										<text class="text_20">（{{item.inspectionNums}}次巡检含进度监控)</text>

									</view>
								</view>

							</view>
							<view class="flex-row group-ends">
								<radio :value="String(item.serviceTypeId)" :checked="item.serviceTypeId==serviceTypeId">
								</radio>
							</view>
						</label>

						<text class="text_21">根据地域判断是否需要超限补偏远费！</text>
					</view>
					<view class="flex-col items-start group_15">
						<text class="text_22">业主需求提示</text>
						<input class="text_23" type="text" v-model="hint" style="width: 100%;"
							placeholder="请输入业主需求提示便于巡检员监测">
					</view>
					<view class="flex-col group_16" @click="go('/pages/material/material')">
						<view class="justify-between">
							<text class="text_24">巡检材料</text>
							<view class="flex-row topCenter">
								<text class="text_25">请填写详细施工材料</text>
								<image :src="$IMG_URL + '16557838861113221762.png'" class="image_10 image_11" />
							</view>
						</view>
						<text class="text_26">可在订单中对其进行完善补充</text>
					</view>

					<view class="flex-col group_111" @click="couponShow=true">
						<view class="justify-between">
							<text class="text_24">选择优惠券</text>
							<view class="flex-row u-col-center">
								<text class="text_188">{{couponAmount>0?'-¥'+couponAmount:'请选择'}}</text>
								<image :src="$IMG_URL + '16557838861113221762.png'" class="image_100" />
							</view>

						</view>

					</view>
				</view>

				<view class="flex-col list">
					<view class="flex-col list-item">
						<view class="flex-row item-center">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_13" />
							<text class="text_29">服务流程</text>
						</view>
						<view class="flex-col items-start group_22">
							<u-parse :content="content.serviceProcess"></u-parse>
						</view>
					</view>
					<view class="flex-col list-item">
						<view class="flex-row item-center">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557826792503103103.png"
								class="image_13" />
							<text class="text_29">服务保障</text>
						</view>
						<view class="flex-col items-start group_22">
							<u-parse :content="content.serviceGuarantee"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="justify-between tab-bar">
			<view class="group_24">
				<text class="text_34">￥</text>
				<text class="text_35">{{price}}</text>
			</view>
			<view class="flex-row">
				<view class="flex-col items-center group_26" @click="go('/pages/my/message/kefu')">
					<image
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827814730205576.png"
						class="image_19" />
					<text class="text_36">在线咨询</text>
				</view>
				<view class="flex-col items-center text-wrapper"><text class="text_37" @click="submits">确认</text></view>
			</view>
		</view>
		<shop-coupon v-if="couponShow" :amount="price" :list="coupon" @confirm="couponConfirm"
			@close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				title: '',
				contentModal: '',

				coupon_id: null,
				coupon: [],
				couponShow: false,
				couponAmount: 0,
				list_ta01FqFE: [null, null],
				roomTypeName: '',
				roomArea: '',
				district: '',
				address: '',
				projectId: '',
				cityInfo: '',
				serviceTypeId: '',
				city: '',
				areaId: '',
				radioItem: [],
				price: '0.00',
				hint: '',
				contractExamineType: '',
				item: {},
				content: {}
			};
		},
		onShow() {
			this.$store.dispatch('checkHouse');
			this.coupon_id = 0;
			this.couponAmount = 0;
			this.rooms();
			this.getcontent();
			this.getCoupon()
		},
		methods: {
			// 图标弹窗事件
			showMask(idx, name) {
				console.log(idx)
				// 可以根据下标来提示不同得内容
				if (idx === 0) {
					this.title = name
					this.contentModal = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				} else {
					this.title = name
					this.contentModal = '包含（施工图+效果图）与房屋设计理念，包含（施工图+效果图）与房屋设计理念！'
				}
				this.show = true
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount,
					couponsId
				} = coupon;
				this.coupon_id = couponsId;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getMoney(this.serviceTypeId, this.projectId, this.coupon_id);
			},
			getcontent() {
				this.$http('consult.queryServiceDetails', {
					type: 5
				}).then(r => {
					if (r.code == 200) {
						this.content = r.data;
					}
				});
			},
			rooms() {
				this.$http('harryroom.queryHousing').then(r => {
					if (r.code == 200) {
						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName + r.data.project.position
						this.projectId = r.data.project.projectId
						this.cityInfo = r.data.project.provinceName + r.data.project.cityName + r.data.project
							.districtName
						this.city = r.data.project.city

						this.houserType(this.city);



					}
				});
			},
			houserType(city) {
				this.$http('check.queryServiceType', { //设计类别
					cityId: city,
					serviceName: '施工巡检'
				}).then(r => {
					if (r.code == 200) {
						console.log(r.data);
						this.radioItem = r.data;
						if (r.data.length > 0) {
							if (!this.serviceTypeId) {
								this.serviceTypeId = r.data[0].serviceTypeId;
							}

							this.getMoney(this.serviceTypeId, this.projectId, this.couponsId);
						}
					} else {
						this.$u.toast(r.msg);
					}
				});

			},
			getCoupon() {

				this.$http('coupon.coupon').then(r => {

					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			getMoney(serviceTypeId, projectId, couponsId = 0) {
				this.$http('check.calcuInspection', {
					serviceTypeId: serviceTypeId,
					projectId: projectId,
					couponsId: couponsId
				}).then(r => {
					if (r.code == 200) {
						this.price = r.data;
					}
				});
			},
			radioChange(item) {
				this.coupon_id = 0;
				this.couponAmount = 0;
				this.serviceTypeId = item.serviceTypeId;
				this.item = item;
				this.getMoney(this.serviceTypeId, this.projectId, this.couponsId);
			},
			// 确认事件
			submits() {
				if (this.contractExamineType == null) {
					this.$u.toast('请选择巡检类型');
					return
				}
				let materiallist = uni.getStorageSync('materiallist');
				if (materiallist.length > 0) {
					materiallist.forEach((item, index) => {
						item.num = index + 1;
						let materialPictures = [];
						item.materialPictures.map(it => {
							materialPictures.push(it.url)
						})
						item.materialPictures = materialPictures.join(',')
					})
				}
				let info = {
					projectId: this.projectId, //项目id
					ordersType: 5,
					totalMoney: this.price, //总额
					payableMoney: (this.price - this.couponAmount).toFixed(2),
					couponsId: this.coupon_id, //优惠券id

					inspection: {
						inspectionType: this.serviceTypeId, //巡检类型ID
						hint: this.hint,
						inspectionMaterialList: !materiallist ? [] : materiallist
					},

				}
				if (this.coupon_id == false) {
					delete info.couponsId;
				}
				this.$http('harryroom.buyInspectionOrder', info).then(r => {
					if (r.code == 200) {
						this.$u.toast(r.msg);
						uni.setStorage({
							key: 'materiallist',
							data: [],
							success: function() {
								uni.navigateTo({
									url: '/pages/pay/pay?orderid=' + r.data + '&orderType=0'
								})
							}
						})

					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.topCenter {
		align-items: center;
	}

	.text_188 {
		color: #fe641a;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_100 {
		margin: 3rpx 0 4rpx 22rpx;
		flex-shrink: 0;
		width: 14rpx;
		height: 26rpx;
	}

	.group-ends {
		margin-left: 90%;
		transform: translateY(-40px);
	}

	.group_3 {
		padding-left: 12px;
		padding-right: 11px;
	}

	.group_111 {
		margin-top: 10rpx;
		padding: 28rpx 0;

	}

	.list-item {
		padding: 14.5px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.item-center {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.image_2 {
		margin-top: 2px;
		width: 13px;
		height: 8px;
	}

	.group_22 {
		margin-top: 20px;
	}

	.image_6 {
		width: 14px;
		height: 14px;
	}

	.image_10 {

		width: 7px;
		height: 13px;
	}

	.image_13 {
		margin-top: 5rpx;
		width: 13px;
		height: 8px;
	}

	.text_29 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text_4 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_6 {
		color: #4d73d4;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding-bottom: 16px;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 5.5px 11.5px 8px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #00000014;
	}

	.image_1 {
		flex-shrink: 0;
		width: 100vw;
		height: 46.6667vw;
	}

	.group_1 {
		margin-top: -41.5px;
		padding: 0 12px;
		position: relative;
		margin-bottom: 100rpx;
	}

	.group_24 {
		align-self: center;
		height: 19px;
	}

	.section_1 {
		padding: 14.5px 12px 34px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_2 {
		margin-top: 10px;
		padding-bottom: 20.5px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_4 {
		margin-top: 10px;
		padding: 14.5px 12px 0;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.list {
		padding-top: 10px;
	}

	.text_34 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_35 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_26 {
		margin-bottom: 2.5px;
	}

	.text-wrapper {
		margin-left: 28px;
		margin-top: 2.5px;
		// padding: 10px 0 12.5px;
		background-color: #1d6aff;
		border-radius: 18px;
		width: 110px;
		height: 36px;
	}

	.text_2 {
		margin-top: 17px;
		color: #adadad;
		font-size: 13px;
		font-family: '.AppleSystemUIFont';
		line-height: 24px;
		text-align: left;
	}

	.section_3 {
		padding: 14.5px 12px 15.5px;
		background-color: #ebf2ff;
		border-radius: 8px 8px 0px 0px;
	}

	.view {
		margin-top: 15px;
	}

	.group_4 {
		margin: 19.5px 11.5px 0 12px;
	}

	.view_1 {
		margin-top: 23px;
	}

	.group_5 {
		margin-top: 16.5px;
		padding-left: 12px;
		padding-right: 11.5px;
	}

	.group_10 {
		margin-top: 20.5px;
	}

	.group_15 {
		margin-top: 19.5px;
		padding-top: 15.5px;
		border-top: solid 0.5px #eeeeee;
	}

	.group_16 {
		margin-top: 20px;
		padding: 14.5px 0 20.5px;
		border-top: solid 0.5px #eeeeee;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_19 {
		padding: 15.5px 0 17.5px;
	}

	.list-item:last-of-type {
		margin-top: 10px;
	}

	.image_19 {
		flex-shrink: 0;
		width: 27px;
		height: 27px;
	}

	.text_36 {
		color: #666666;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_37 {
		color: #ffffff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		justify-content: center;
	}

	.text_1 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_3 {
		margin-bottom: 2px;
		color: #2862f4;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
		font-weight: 600;
	}

	.image_4 {
		margin-top: 5px;
		width: 15px;
		height: 16px;
	}

	.text_8 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_9 {
		color: #2f6ecf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
		text-align: right;
		width: 184.5px;
	}

	.text_10 {
		margin-bottom: 3px;
	}

	.text_11 {
		margin-top: 3px;
	}

	.text_12 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_13 {
		color: #2f6ecf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_7 {
		display: flex;
		align-items: center;
		padding-bottom: 17px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_8 {
		margin-top: 15px;
	}

	.group_9 {
		margin-top: 13px;
	}

	.text_21 {
		margin-top: -10px;
		align-self: flex-start;
		color: #ff371d;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_22 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_23 {
		margin-top: 15.5px;

		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_26 {
		margin-top: 14px;
		align-self: flex-start;
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_27 {
		margin-bottom: 3px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_20 {
		margin-top: 3px;
	}

	.text_14 {
		margin-left: 8px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		margin-bottom: 1.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_7 {
		margin-left: 7.5px;
		margin-top: 4px;
	}

	.text_16 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_17 {
		margin-left: 18.5px;
		margin-bottom: 4.5px;
		color: #666666;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.image_9 {
		align-self: center;
		border-radius: 50%;
		width: 18px;
		height: 18px;
	}

	.text_24 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_28 {
		color: #fe641a;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_12 {
		margin: 1.5px 0 2px 11px;
	}

	.text_31 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_15 {
		margin-top: 16.5px;
		border-radius: 8px;
		width: 327px;
		height: 164px;
	}

	.text_32 {
		margin-top: 15px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_16 {
		margin-top: 16.5px;
		border-radius: 8px;
		width: 327px;
		height: 164px;
	}

	.group_14 {
		margin-top: 13px;
	}

	.text_25 {
		color: #bfbfbf;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_11 {
		margin-left: 11.5px;
		// margin-top: 4.5px;
	}

	.text_18 {
		margin-bottom: 1.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_8 {
		margin: 1px 92.5px 0 7.5px;
	}

	.text_19 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.text_20 {
		margin: 3.5px 0 1.5px 10px;
		color: #666666;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}
</style>
